<template>
	<div class="tabs">
		<div class="one">
			<label>小众种草</label>
			<span>游侠客独一无二的旅行体验</span>
		</div>
		<div class="swiper tabs-swiper">
			<ol class="tabs-one swiper-wrapper">
				<li v-for='item in list2' :key="item.id" class="swiper-slide">
					<router-link to="/">
						<aside>
							<img :src="item.imgURL"/>
							<p>{{item.title}}</p>
							<p>{{item.msg}}</p>
						</aside>
					</router-link>
				</li>
			</ol>
		</div>
	</div>
</template>

<script>
	// 1.引入vue周期函数
	import {onMounted} from 'vue'
	//2.引入swiper动态组件
	import Swiper ,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination
	} from 'swiper'
	//3.说明swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	
	export default{
		name:"Tabs",
		data(){
			return {
				list2:[
					{id: 1,imgURL: 'img/a1.png',title: '冬藏会',msg: '收藏四季美好',},
					{id: 2,imgURL: 'img/a2.jpg',title: '蓝冰季',msg: '邂逅梦幻蓝冰',},
					{id: 3,imgURL: 'img/a3.jpg',title: '开路先锋',msg: '探索无止境',},
					{id: 4,imgURL: 'img/a4.jpg',title: '向野房车',msg: '新型旅行方式',},
					{id: 5,imgURL: 'img/a5.jpg',title: '游侠人文',msg: '诗行江南',},
					{id: 6,imgURL: 'img/a6.jpg',title: '野奢邦',msg: '宿于山海中',},
				]
			}
		},
		setup(){
			onMounted( ()=>{
				new Swiper('.tabs-swiper',{
					slidesPerView:3
				})
			})
		}
	}
</script>

<style scoped>
.tabs{
	height: 8rem;
}
.tabs .one label{
	font-size: 0.5rem;
	font-weight: bold;
	margin-left: 0.5rem;
}
.tabs .one span{
	margin-left: 0.6rem;
	font-size: 0.35rem;
	color: #ffa973;
	background-color:#fff3ea ;
}
.tabs ol{
	width: 100%;
	height: 100%;
	margin-top: 0.2rem;
}
.tabs ol li {
	width: 100%;
	height: 90%;
	float: left;	
	position: relative;
	text-align: center;
}
.tabs ol li:nth-child(even){
	float: right;
}
.tabs ol li img{
	width: 98%;
	height: 4.5rem;
}
.tabs ol li p:nth-child(2){
	top: 70%;
	left: 28%;
	font-size: 0.5rem;
	line-height: 0.5rem;
	color: white;
	position: absolute;
}
.tabs ol li p:nth-child(3){
	left: 20%;
	top: 85%;
	font-size: 0.4rem;
	line-height: 0.5rem;
	position: absolute;
	color:white;
}
</style>
